<template>
	<div class="img">
		<a-upload action="https://www.shoujiakang.cn/api/sys/common/upload" list-type="picture-card"
			:file-list="fileList" @preview="handlePreview" @change="handleChange">
			<div v-if="fileList.length < number">
				<a-icon type="plus" />
				<div class="ant-upload-text">
					{{text}}
				</div>
			</div>
		</a-upload>
		<a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
		  <img alt="example" style="width: 100%" :src="previewImage" />
		</a-modal>
	</div>
</template>

<script>
	import Vue from 'vue'
	import {
		ACCESS_TOKEN
	} from "@/store/mutation-types"
	export default {
		name: 'baseInfoImageUpload',
		data() {
			return {
				uploadLoading: false,
				picUrl: false,
				headers: {},
				previewImage: "",
				previewVisible: false,
			}
		},
		props: {
			text: {
				type: String,
				required: false,
				default: "上传"
			},
			fileList: {
				type: Array,
				default: []
			},
			value: {
				type: [String, Array],
				required: false
			},
			disabled: {
				type: Boolean,
				required: false,
				default: false
			},
			uploadId: {
				default: 0
			},
			number: {
				type: Number,
				required: false,
				default: 1
			}
		},
		created() {
			const token = Vue.ls.get(ACCESS_TOKEN);
			this.headers = {
				"X-Access-Token": token
			}
		},
		methods: {
			handleCancel() {
				this.previewVisible = false;
			},
			async handlePreview(file) {
				this.previewImage = file.url || file.preview;
				this.previewVisible = true;
			},
			handleChange({fileList}) { 
				fileList.forEach(item => {
					item.url = item.response ? item.response.message : item.url
				})
				 this.$emit('change',fileList,this.uploadId)
			},
		},
		model: {
			prop: 'value',
			event: 'change'
		}
	}
</script>

<style scoped>
	/* update--begin--autor:lvdandan-----date:20201016------for：j-image-upload图片组件单张图片详情回显空白
  * https://github.com/zhangdaiscott/api/issues/1810
  * https://github.com/zhangdaiscott/api/issues/1779
  */

	/deep/ .imgupload .iconp {
		padding: 20px;
	}

	/* update--end--autor:lvdandan-----date:20201016------for：j-image-upload图片组件单张图片详情回显空白*/

	/deep/ .image-upload-single-over .ant-upload-select {
		display: none
	}
</style>